<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
    <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>长虹[联合运营平台后台管理系统]</title>
    <!-- 全局CSS 开始-->
    <link href="../css/global/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/global/font-awesome.min.css" rel="stylesheet" />
    <link href="../css/global/simple-line-icons.css" rel="stylesheet" />
    <link href="../css/global/animate.css" rel="stylesheet" />
    <link href="../css/global/style.css" rel="stylesheet" />
    <link href="../js/plugins/pace/pace.css" rel="stylesheet" />
    <!-- 全局CSS 结束-->
    <!-- 页面CSS 开始-->
    <!-- 页面CSS 结束-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="../js/bootstrap/html5shiv.min.js"></script>
        <script src="../js/bootstrap/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="wrapper wrapper-content animated fadeInUp">
            <div class="row page-heading">
                <h4><i class="fa fa-flask"></i>  UI组件 / 图片、幻灯及fancybox</h4>
            </div>
            <div class="row">
                <div class="col-sm-7">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>不带文字说明的幻灯</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="carousel slide" id="carousel1">
                                <!-- 导航圆点 -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                </ol>
                                <!-- 幻灯主体 -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img alt="image" class="img-responsive" src="../images/p_big1.jpg" />
                                    </div>
                                    <div class="item">
                                        <img alt="image" class="img-responsive" src="../images/p_big2.jpg" />
                                    </div>
                                    <div class="item">
                                        <img alt="image" class="img-responsive" src="../images/p_big3.jpg" />
                                    </div>
                                </div>
                                <!-- 前后控制 -->
                                <a data-slide="prev" href="#carousel1" class="left carousel-control">
                                    <span class="icon-prev"></span>
                                </a>
                                <a data-slide="next" href="#carousel1" class="right carousel-control">
                                    <span class="icon-next"></span>
                                </a>
                            </div>
                            <br />
                            <p><span class="text-danger">响应式</span>的图片自动循环的幻灯图，可添加“导航圆点”和“图片文字说明”，<a href="http://v3.bootcss.com/javascript/#carousel">点击详情</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>带文字说明的幻灯</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content ">
                            <div class="carousel slide" id="carousel2">
                                <ol class="carousel-indicators">
                                    <li data-slide-to="0" data-target="#carousel2" class="active"></li>
                                    <li data-slide-to="1" data-target="#carousel2"></li>
                                    <li data-slide-to="2" data-target="#carousel2" class=""></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img alt="image" class="img-responsive" src="../images/p_big1.jpg" />
                                        <div class="carousel-caption">
                                            <p>第一张幻灯图</p>
                                        </div>
                                    </div>
                                    <div class="item ">
                                        <img alt="image" class="img-responsive" src="../images/p_big3.jpg" />
                                        <div class="carousel-caption">
                                            <p>第二张幻灯图</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img alt="image" class="img-responsive" src="../images/p_big2.jpg" />
                                        <div class="carousel-caption">
                                            <p>第三张幻灯图</p>
                                        </div>
                                    </div>
                                </div>
                                <a data-slide="prev" href="#carousel2" class="left carousel-control">
                                    <span class="icon-prev"></span>
                                </a>
                                <a data-slide="next" href="#carousel2" class="right carousel-control">
                                    <span class="icon-next"></span>
                                </a>
                            </div>
                            <br />
                            <p>在<code>img</code>下加入以下代码</p>
                            <pre>
&lt;div class="carousel-caption"&gt;
    &lt;p&gt;第三张幻灯图&lt;/p&gt;
&lt;/div&gt;
                            </pre>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>响应式图片</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content ">
                            <p>在 Bootstrap 版本 3 中，通过为图片添加 <code>.img-responsive</code> 类可以让图片支持响应式布局。其实质是为图片设置了 <code>max-width: 100%;</code> 和 <code>height: auto;</code> 属性，从而让图片在其父元素中更好的缩放。</p>
                            <pre>&lt;img src="..." class="img-responsive" alt="Responsive image"&gt;</pre>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>图片形状</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content ">
                            <p>通过为 <code>&lt;img&gt;</code> 元素添加以下相应的类（<code>.img-rounded</code>,<code>.img-circle</code>，<code>.img-thumbnail</code>可以让图片呈现不同的形状。</p>
                            <img data-src="holder.js/140x140" class="img-rounded" alt="140x140" src="" style="width: 140px; height: 140px;" />
                            <img data-src="holder.js/140x140" class="img-circle" alt="140x140" src="" style="width: 140px; height: 140px;" />
                            <img data-src="holder.js/140x140" class="img-thumbnail" alt="140x140" src="" style="width: 140px; height: 140px;" />
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>fancybox 图片查看插件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content ">
                            <div class="row">
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big1.jpg" title="example-image.jpg">
                                       <img src="../images/p_big1.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big2.jpg" title="example-image.jpg">
                                       <img src="../images/p_big2.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big3.jpg" title="example-image.jpg">
                                       <img src="../images/p_big3.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big1.jpg" title="example-image.jpg">
                                       <img src="../images/p_big1.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big2.jpg" title="example-image.jpg">
                                       <img src="../images/p_big2.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-md-2 col-sm-4 col-xs-6 mbm">
                                    <a class="fancybox" href="../images/p_big3.jpg" title="example-image.jpg">
                                       <img src="../images/p_big3.jpg" alt="..." class="img-responsive" />
                                    </a>
                                </div>
                            </div>
                            <br />
                            <pre>
&lt;a class="fancybox" href="大图链接" title="图片标题"&gt;
   &lt;img src="缩略图链接" alt="..." class="img-responsive"&gt;
&lt;/a&gt;
                            </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 全局js 开始-->
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap/bootstrap.min.js"></script>
        <script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
        <script src="../js/custom/custom.js"></script>
        <script src="../js/plugins/pace/pace.min.js"></script>
        <!-- 全局js 结束-->
        <!-- 页面js 开始-->
        <!-- fancybox -->
        <script src="../js/plugins/fancybox/jquery.fancybox.js"></script>
        <!-- iframeResizer -->
        <!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
        <!-- 页面js 结束-->
    </body>
</html>